<template>
	<section>
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/enterprise'}">企业客户</el-breadcrumb-item>
				<el-breadcrumb-item>企业客户列表</el-breadcrumb-item>
			</el-breadcrumb>
			<help-components>
				<span slot="headText">客户列表</span>
				<p slot="headDescText">客户列表为订货账号资料的统一管理、查询工作区。</p>
				<div slot="helpContentWrap">
					<div>
						<h3>客户资料管理有哪些注意要点？</h3>
						<p>
							 ①	录入客户资料前，请先创建客户级别<br>
							 ②	新增客户提供三种方式：点击【新增】按钮单个添加、导入、开放注册（在应用中心启用）<br>
							 ③	开通/禁用功能用于控制账号是否可登录订货平台。只有开通了订货账号的客户才可登录订货平台下单或管理端为其代下订单。<br>
							 ④	删除订货账号：慎用，已删除的账号不可恢复，不可重建。如客户已发生订货交易则不允许删除。<br>
						</p>
					</div>
					<div>
						<h3>可以把“客户”修改为“门店”或其他称谓吗？？</h3>
						<p>
							在【设置->系统设置->客户设置】页面，您可随心设置订货方称谓。左侧的【客户】菜单也会同步更名
						</p>
					</div>
				</div>
			</help-components>
		</div>
		<!--start content-->
		<div class="content" id="content">
			<!--高级搜索-->
			<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="add"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search" v-show="add">
						<div class="search-title">
							<p>高级搜索</p>
						</div>
						<div class="form">
							<ul>
								<li>
									<span style="margin-right: 2px;">关键词</span>
									<div style="width: 356px;"><input type="" v-model="vue_generalSearch_jiaojian" placeholder="请输入客户名称/客户编码/登录账号/联系方式" /></div>
								</li>
								<li class="formLi">
									<span>客户级别</span>
									<el-select v-model="vue_advSearch_gradeCode" clearable placeholder="请选择" >
										<el-option v-for="item in vue_advSearch_options"
											:key="item.vue_advSearch_gradeCode"
											:label="item.gradeName"
											:value="item.gradeCode">
										</el-option>
									</el-select>
								</li>
								<li style="text-align: left;">
									<p style="float: left;margin-left: 28px;margin-top: 10px;">
										<span style="margin-right: 0px;">客户状态</span>
										<template>
											<el-radio-group v-model="vue_advSearch_radio2">
												<el-radio class="radio" label="2">全部</el-radio>
												<el-radio class="radio" label="0">启用</el-radio>
												<el-radio class="radio" label="1">停用</el-radio>
											</el-radio-group>
										</template>
									</p>
								</li>
							</ul>

						</div>
						<div class="search-btn">
							<el-button @click="addOk()" type="primary">确定</el-button>
							<el-button @click="addCancel">取消</el-button>
						</div>
					</div>
				</transition>
			</div>
			<!---->
			<div class="piliangCao sousuo " v-if="vue_advSearch_showDialog">
				搜索结果
				<em style="font-style: normal;margin: 0px 20px;">|</em>
				<a @click="qingchu"><em class="iconfont">&#xe66b;</em>清除搜索</a>
				<a @click="jixusou"><em class="iconfont">&#xe62d;</em>继续搜索</a>
			</div>
			<div class="piliangCao" v-if="vue_tabactive>0 && vue_advSearch_showDialog==false" >
				<em class="iconfont" @click="off" style="margin: 2px 20px;position: relative;top: 2px;cursor: pointer;">&#xe630;</em>
				已选<span>{{vue_tabactive}}</span>项<em style="font-style: normal;margin: 0px 20px;">|</em>
				<a @click="batchEnable"><em class="iconfont">&#xe767;</em>批量启用</a>
				<a @click="batchDisable"><em class="iconfont">&#xe63a;</em>批量停用</a>
				<a ><em class="iconfont">&#xe65a;</em>三证审核</a>
			</div>
			<div class="public-th clearfix" v-if="vue_tabactive==0">
				<div class="public-left clearfix">
					<div class="slideBtn fl" >
						<el-select v-model="vue_advSearch_gradeCode" @change="handleCommand" placeholder="全部级别">
							<el-option key="" label="全部级别" value="">
								全部级别
							</el-option>
							<el-option v-for="item in vue_advSearch_options"
								:key="item.vue_advSearch_gradeCode"
								:label="item.gradeName"
								:value="item.gradeCode">
							</el-option>
						</el-select>
					</div>
					<div class="public-left clearfix">
						<div class="goods-input">
							<input @keydown.enter="Query" type="text" v-model="vue_generalSearch_jiaojian" placeholder="请输入客户名称/客户编码/联系方式" /><i @click="Query"></i>
						</div>
					</div>
					<span class="fl search-openBtn" id="search-openBtn" @click="gaojisousu">高级搜索</span>
				</div>
				<div class="public-right clearfix">
					<!--<a>导出</a>
					<a>导入</a>-->
					<router-link to="/addenterprise" style="background: #13c19f;color: #fff;border: 0;">新增</router-link>
				</div>
			</div>
			<div class="table contentBodyCon kehutable" :class="{beforeNone:membersQueryCompanyByPageSet.list.length!='0'}" id="table">
				<el-table
				ref="multipleTable"
				:data="membersQueryCompanyByPageSet.list"
        :row-class-name="disableStateBtn"
				style="width: 100%;  z-index: 10;"
				:max-height="vue_tableH"
				@sort-change="vFun_sort"
				@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60"></el-table-column>
					<el-table-column prop="memberCode" label="客户编码" width="180"></el-table-column>
					<el-table-column prop="memberName" label="客户名称" sortable="custom" width="150"  to="/modifykehu">
						<template scope="scope">
                        	<p class="pkehuName">
								<span @click="xiangqing(scope.row)" v-html="scope.row.memberName"></span>
							</p>
						</template>
					</el-table-column>
					<el-table-column prop="gradeName" label="级别"  width="150"></el-table-column>
					<el-table-column prop="operatorAccount" label="登录账号" width="200"></el-table-column>
					<el-table-column prop="operatorPhone" label="联系方式" width="150"></el-table-column>
					<el-table-column prop="dataBillstateStr" sortable="custom" label="状态" width="110" ></el-table-column>
					<el-table-column prop="createDateStr" sortable="custom" label="创建时间"  min-width="200"> </el-table-column>
					<el-table-column prop="" label="" fixed="right" width="60" >
						<template scope="scope">
							<el-popover trigger="hover" placement="bottom">
								<p class="p" style="cursor: pointer;" @click="modify(scope.row)">
									<em class="iconfont">&#xe617;</em>修改
								</p>
								<p class="p" style="cursor: pointer;" @click="Delete(scope.$index, membersQueryCompanyByPageSet.list)"><em class="iconfont">&#xe644;</em>作废</p>
								<p class="p" style="cursor: pointer;" v-if="'1'==membersQueryCompanyByPageSet.list[scope.$index].dataBillstate" @click="qiyong(scope.$index, membersQueryCompanyByPageSet.list)"><em class="iconfont">&#xe767;</em>启用</p>
								<p class="p" style="cursor: pointer;" v-if="'0'==membersQueryCompanyByPageSet.list[scope.$index].dataBillstate" @click="jinyong(scope.$index, membersQueryCompanyByPageSet.list)"><em class="iconfont">&#xe63a;</em>停用</p>
								<div slot="reference" class="name-wrapper" style="text-align: center;">
									<em class="iconfont tab-hover">&#xe607;</em>
								</div>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="block">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="parseInt(membersQueryCompanyByPageSet.pageTools.pageNo)"
					:page-sizes="membersQueryCompanyByPageSet.pageTools.pageSizeOptions"
					:page-size="parseInt(membersQueryCompanyByPageSet.pageTools.pageSize)"
					:total="parseInt(membersQueryCompanyByPageSet.pageTools.recordCount)"
					layout="total, prev, pager, next, sizes,jumper">
				</el-pagination>
			</div>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	import helpComponents from '../../../components/help/help'
	export default {
		components:{helpComponents},
		data() {
			return {
				add: false,
				show: true,
				vue_advSearch_showDialog:"",
				vue_tableH: null,
				vue_advSearch_radio2: '2',
				vue_generalSearch_jiaojian:'',						//查询条件
				vue_advSearch_jiaojian2:'',							//高级查询条件
				dataBillstate:'',									//状态
				allOrder: false,
				vue_tabactive:'',									//全选
				vue_advSearch_gradeCode: '',						//高级搜索客户级别
				vue_rechargeCodeStr:"",
				vue_advSearch_options: [],							//高级搜索客户级别
				membersQueryCompanyByPageSet:{
					list:[],										//客户列表数据
					pageTools:{},									//分页数据
					sumInfo:{}										//汇总信息
				},//多选框选中值
				basicMemberQb:{
					"orderStr":""
				}
			}
		},
		methods: {
      //禁用后行数变灰  start
      disableStateBtn(rowData, index) {
        return rowData.dataBillstate == "1" ? "grayColor" : "";
      },
	    	vFun_sort(type){
	    		if(type.order==='ascending'){
	    			this.basicMemberQb.orderStr=type.prop
	    		}else if(type.order==='descending'){
	    			this.basicMemberQb.orderStr=type.prop +' desc'
	    		}else{
	    			this.basicMemberQb.orderStr=''
	    		};
	    		this.queryByPage();
	    	},
//多选
			handleSelectionChange(val) {
				this.multipleSelection = val;
				this.vue_tabactive=val.length;
		        //获取选中值
		        this.vue_rechargeCodeStr = "";
				for(let i=0,len=val.length;i<len;i++){
					this.vue_rechargeCodeStr += val[i].memberCode+","
				}
				this.vue_rechargeCodeStr = this.vue_rechargeCodeStr.substring(0,this.vue_rechargeCodeStr.length-1);
				if (this.vue_tabactive!=0) {
					this.vue_advSearch_showDialog=false
				}
			},
//关闭已选
			off(){
				this.vue_tabactive = '';
				this.show=true;
				this.$refs.multipleTable.clearSelection()
			},
//分页
			handleSizeChange(val) {
				var offset = (this.membersQueryCompanyByPageSet.pageTools.pageNo-1)*this.membersQueryCompanyByPageSet.pageTools.pageSize;
				this.queryByPage(val,offset);
			},
			handleCurrentChange(val) {
				var offset = (this.val-1)*this.membersQueryCompanyByPageSet.pageTools.pageSize;
				this.queryByPage(val,offset);
			},

			handleCommand() {
				var dsds = this.vue_advSearch_gradeCode;
				this.vue_generalSearch_jiaojian='';
				this.axios({
					method: 'post',
					url: "/v3/basic/members/queryCompanyByPage/list",
					data:{
						"gradeCode":this.vue_advSearch_gradeCode,
						"limit":this.membersQueryCompanyByPageSet.pageTools.pageSize,
						"offset":(this.membersQueryCompanyByPageSet.pageTools.pageNo-1)*this.membersQueryCompanyByPageSet.pageTools.pageSize
					}
				}).then((res) => {
						this.membersQueryCompanyByPageSet.list = res.data.basicMemberCompanyDataList;
						this.membersQueryCompanyByPageSet.pageTools =res.data.pageTools;    //一共几条数据
						this.membersQueryCompanyByPageSet.pageTools.pageSizeOptions = JSON.parse(this.membersQueryCompanyByPageSet.pageTools.pageSizeOptions);
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);

				});
			},
			kael(index, data) {
				console.log(index)
				console.log(data[index].dataBillstate)
			},
			//条件查询
			Query(){
				this.axios({
					method: 'post',
					url: "/v3/basic/members/queryCompanyByPage/list",
					data:{
						"fullTextFilterStr":this.vue_generalSearch_jiaojian,
						"gradeCode":this.vue_advSearch_gradeCode,
						"limit":this.membersQueryCompanyByPageSet.pageTools.pageSize,
						"offset":(this.membersQueryCompanyByPageSet.pageTools.pageNo-1)*this.membersQueryCompanyByPageSet.pageTools.pageSize
					}
				}).then((res) => {
						this.membersQueryCompanyByPageSet.list = res.data.basicMemberCompanyDataList;
						this.membersQueryCompanyByPageSet.pageTools =res.data.pageTools;    //一共几条数据
						this.membersQueryCompanyByPageSet.pageTools.pageSizeOptions = JSON.parse(this.membersQueryCompanyByPageSet.pageTools.pageSizeOptions);
				}).catch((err)=>{
						this.Public.openError(this,err.response.data);
				});

			},
			//开通
			qiyong(index, data) {
				this.$confirm('确认启用此用户？', '确认', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        cancelButtonClass:"fr",
			        confirmButtonClass:"fr",
			        customClass:"clearfixBox"
			    }).then(() => {
					this.axios({
						method: 'PATCH',
						url: "/v3/basic/members/batchEnableCompany/"+data[index].memberCode+"/batchEnable"
					}).then((res) => {
						var limit = this.membersQueryCompanyByPageSet.pageTools.pageSize;
						var offset = (this.membersQueryCompanyByPageSet.pageTools.pageNo-1)*this.membersQueryCompanyByPageSet.pageTools.pageSize;
						this.queryByPage(limit,offset);//开通之后刷新页面
					    this.$notify({
//							          title: '成功',
							          message: '操作成功！',
							          type: 'success',
							          duration:3000
							        });
				});
			});
			},

			//禁用
			jinyong(index,data) {
				this.$confirm('确认禁用此用户？', '确认', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        cancelButtonClass:"fr",
			        confirmButtonClass:"fr",
			        customClass:"clearfixBox"
			    }).then(() => {
					this.axios({
						method: 'PATCH',
						url: "/v3/basic/members/batchDisableCompany/"+data[index].memberCode+"/batchDisable"
					}).then((res) => {
						var limit = this.membersQueryCompanyByPageSet.pageTools.pageSize;
						var offset = (this.membersQueryCompanyByPageSet.pageTools.pageNo-1)*this.membersQueryCompanyByPageSet.pageTools.pageSize;
						this.queryByPage(limit,offset); //禁用之后刷新页面
						this.$notify({
						          message: '操作成功！',
						          type: 'success',
						          duration:3000
						        });
					});
				})
			},
			batchEnable(){						//批量启用
				this.axios({
						method: 'PATCH',
						url: "/v3/basic/members/batchEnableCompany/"+this.vue_rechargeCodeStr+"/batchEnable"
				}).then((res) => {
						var limit = this.membersQueryCompanyByPageSet.pageTools.pageSize;
						var offset = (this.membersQueryCompanyByPageSet.pageTools.pageNo-1)*this.membersQueryCompanyByPageSet.pageTools.pageSize;
						this.queryByPage(limit,offset);
						this.$notify({
			        	message: '操作成功！',
			          	type: 'success',
			          	duration:3000
			        });
				}).catch((err)=>{
						this.Public.openError(this,err.response.data);
					});
			},
			batchDisable(){									//批量停用
				this.axios({
						method: 'PATCH',
						url: "/v3/basic/members/batchDisableCompany/"+this.vue_rechargeCodeStr+"/batchDisable"
				}).then((res) => {
						var limit = this.membersQueryCompanyByPageSet.pageTools.pageSize;
						var offset = (this.membersQueryCompanyByPageSet.pageTools.pageNo-1)*this.membersQueryCompanyByPageSet.pageTools.pageSize;
						this.queryByPage(limit,offset);
						this.$notify({
				        	 message: '操作成功！',
				       		 type: 'success',
				          	 duration:3000
				        });
				}).catch((err)=>{
						this.Public.openError(this,err.response.data);
					});
			},
			//删除
			Delete(index, data) {
				this.$confirm('确认作废此用户？', '确认', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        cancelButtonClass:"fr",
			        confirmButtonClass:"fr",
			        customClass:"clearfixBox"
				}).then(() => {
					this.axios({
						method: 'DELETE',
						url: "/v3/basic/members/"+data[index].memberCode+"/batchDeleteCompany",
					}).then((res) => {
						    var limit = this.membersQueryCompanyByPageSet.pageTools.pageSize;
						    var offset = (this.membersQueryCompanyByPageSet.pageTools.pageNo-1)*this.membersQueryCompanyByPageSet.pageTools.pageSize;
							this.queryByPage(limit,offset);
							this.Public.openSuccess(this,"操作成功！");
					}).catch((err)=>{
						this.Public.openError(this,err.response.data)
					});
				}).catch(() => {});
			},

//详情
		xiangqing(data){
			localStorage.setItem("memberCode",data.memberCode);
			window.location.hash = "#/enterpriseupdate"
		},
	//存储需要修改的客户的唯一标识
			modify(data) {
				localStorage.setItem("memberCode",data.memberCode);
				window.location.hash = "#/enterpriseupdate"
			},
		gaojisousu(){
			this.add=true;
			this.vue_generalSearch_jiaojian='';
		},

		addOk() {										//高级搜索
			if (this.vue_advSearch_radio2=='2') {
				this.vue_advSearch_radio2=''
			}
			this.axios({
				method: 'post',
				url: "/v3/basic/members/queryCompanyByPage/list",
				data:{
					"fullTextFilterStr":this.vue_generalSearch_jiaojian,
					"gradeCode":this.vue_advSearch_gradeCode,
					"dataBillstate":this.vue_advSearch_radio2,
					"limit":this.membersQueryCompanyByPageSet.pageTools.pageSize,
					"offset":(this.membersQueryCompanyByPageSet.pageTools.pageNo-1)*this.membersQueryCompanyByPageSet.pageTools.pageSize
				}
			}).then((res) => {
					this.membersQueryCompanyByPageSet.list = res.data.basicMemberCompanyDataList;
					this.membersQueryCompanyByPageSet.pageTools =res.data.pageTools;    //一共几条数据
			}).catch((err)=>{
				this.Public.openError(this,err.response.data);
			});
			this.add = !this.add;
			this.vue_advSearch_showDialog=true;
			this.vue_tabactive="2";
		},
		qingchu(){						//清除搜索
				this.vue_generalSearch_jiaojian='';
				this.vue_advSearch_radio2='2';
				this.vue_advSearch_gradeCode='';
				this.vue_advSearch_showDialog=false;
				this.vue_tabactive="0";
				// 请求企业客户列表
				var limit = this.membersQueryCompanyByPageSet.pageTools.pageSize;
				var offset = (this.membersQueryCompanyByPageSet.pageTools.pageNo-1)*this.membersQueryCompanyByPageSet.pageTools.pageSize;
				this.queryByPage(limit,offset);
			},
		jixusou(){						//继续搜索
			this.add = true;
			if (this.vue_advSearch_radio2=='') {
				this.vue_advSearch_radio2='2'
			}
		},
			//取消高级查询
		addCancel() {
				this.add = !this.add;
				this.vue_generalSearch_jiaojian='';
				this.vue_advSearch_radio2='2';
				this.vue_advSearch_gradeCode='';
				this.vue_advSearch_showDialog=false;
				this.vue_tabactive="0";
			},
		queryByPage(limit,offset){
			// 请求企业客户列表
			this.axios({
				method: 'post',
				url: "/v3/basic/members/queryCompanyByPage/list",
				data:{
					"limit":limit,
					"offset":offset,
					"orderStr":this.basicMemberQb.orderStr
				}
			}).then((res) => {
					this.membersQueryCompanyByPageSet.list = res.data.basicMemberCompanyDataList;
					this.membersQueryCompanyByPageSet.pageTools=res.data.pageTools;
					this.membersQueryCompanyByPageSet.pageTools.pageSizeOptions = JSON.parse(this.membersQueryCompanyByPageSet.pageTools.pageSizeOptions);
			}).catch((err)=>{
					this.Public.openError(this,err.response.data)
			});
		},
	},
		created(){
			this.membersQueryCompanyByPageSet.pageTools = this.$store.state.page;
		},
		mounted() {
			document.querySelector('body').onclick = () => {
				if(this.allOrder == true) {
					this.allOrder = false;
				}
			};
			var limit = this.membersQueryCompanyByPageSet.pageTools.pageSize;
			var offset= (this.membersQueryCompanyByPageSet.pageTools.pageNo-1)*this.membersQueryCompanyByPageSet.pageTools.pageSize;
			this.queryByPage(limit,offset);

			// 获取会员级别
			this.axios({
				method: 'post',
				url: "/v3/member/grades/listAll",
				data:{}
			}).then((res) => {
					this.vue_advSearch_options = res.data.list;
			}).catch((err)=>{
			    this.Public.openError(this,err.response.data)
		    });
			// 设置窗口高度
			var winHieg = document.documentElement.clientHeight;
			var cont = document.getElementById("content");
			cont.style.height = winHieg - 115 + "px";
			this.vue_tableH = document.documentElement.clientHeight - 240;
		},
	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";
	.location {
		padding: 3px 0 15px 0;
	}

	.content {
		background: #fff;
		padding: 15px;
		overflow-y: auto;
		font-family: "微软雅黑";
		position: relative;
	}

	.public-th {
		min-width: 750px;
		position: relative;
		z-index: 100;
	}

	.public-left {
		float: left;
	}

	.public-left a,
	.public-left span.search-openBtn {
		display: block;
		float: left;
		margin-right: 10px;
		padding-right: 0px;
		position: relative;
		height: 36px;
		line-height: 36px;
		z-index: 100;
		cursor: pointer;
	}

	.goods-input input {
		display: block;
		float: left;
		width: 400px;
		height: 34px;
		font-size: 12px;
		border: 0;
		margin-left: 20px;
	}

	.public-right {
		float: right;
		overflow: hidden;
	}

	.public-right a {
		display: block;
		float: left;
		margin-left: 10px;
		width: 80px;
		height: 32px;
		box-sizing: border-box;
		text-align: center;
		line-height: 32px;
		border-radius: 30px;
		border: 1px solid #cdd9e6;
		cursor: pointer;
	}

	.public-left a:hover {
		text-decoration: none;
	}

	.public-left a em {
		display: inline-block;
		position: relative;
		font-size: 14px;
	}

	.return-goods .public-left a i {
		position: static;
		width: 20px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		background: none;
		background-size: 18px;
		-webkit-transition: .2s;
		transition: .2s;
		vertical-align: middle;
	}

	.public-right a:hover {
		text-decoration: none;
	}


	.goods-input {
		float: left;
		width: 450px;
		border: 1px solid #cdd9e6;
		border-radius: 30px;
		margin-right: 10px;
		cursor: pointer;
	}

	.goods-input:hover {
		border-color: #13C19F;
		transition: 1s;
	}

	.goods-input i {
		cursor: pointer;
	}


	.table {
		margin-top: 15px;
	}

	.table th {
		height: 50px;
	}

	.el-table th>.cell {
		word-wrap: normal;
		text-overflow: ellipsis;
		line-height: 20px;
		width: 100%;
		box-sizing: border-box;
		font-weight: normal!important;
		font-size: 14px;
	}

	.el-table {
		font-size: 12px!important;
		font-weight: normal!important;
	}

	.block {
		float: right;
		margin: 15px;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .3s
	}

	.fade-enter,
	.fade-leave-active {
		/*transform: translateY(-100px);*/
		opacity: 0
	}

	.goods-fei i {
		font-size: 14px;
	}

	.tab-hover {
		color: #b7c6d6;
		cursor: pointer;
	}

	.el-tag {
		background-color: inherit;
		color: #b7c6d6;
	}

	.el-popover {
		min-width: 100px;
	}
	.pkehuName span{
		cursor: pointer;
	}

	.pkehuName span:hover{
		color: #03B8CC;
	}
	.p {
		text-indent: 10px;
		line-height: 30px;
	}

	.p em {
		position: relative;
		top: 2px;
		margin-right: 3px;
	}

	.p:hover {
		background: #eef1f9;
		color: #03B8CC;
	}
	.piliangCao{
		margin-left: -6px;
		height: 36px;
		line-height: 36px;
	}
	.piliangCao em {
		font-size: 14px;
	}

	.piliangCao a {
		cursor: pointer;
		color: #768696;
		margin-right: 20px;
	}
	.piliangCao a:hover{
		color: #03B8CC;
	}
	.el-table--fit {
		border-left: 0;
	}

	.textR {
		text-align: right;
	}

	.font12 {
		font-size: 12px;
	}

	.setbtn {
		margin-left: 30px;
	}

	.modal-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 80;
		background-color: rgba(240, 240, 240, 0.2);
	}

	.specific-search {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		padding: 30px;
		z-index: 1005;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 10px #ccc;
	}

	.search-title {
		font-size: 16px;
		border: 0;
		color: #415161;
	}

	.form {
		width: 1000px;
		background: #fff;
		margin: 20px 0;
	}

	.search-btn {
		margin-top: 70px;
	}

	.specific-search {}

	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.slideDown-enter-active,
	.slideDown-leave-active {
		transition: .4s;
	}

	.slideDown-enter,
	.slideDown-leave-active {
		height: 0;
		opacity: 0;
	}

	.form {
		width: 450px;
		text-align: right;
	}

	.form li {
		margin-top: 15px;
	}

	.form input {
		width: 350px;
		height: 32px;
		border: 0;
	}

	.form div {
		width: 358px;
		height: 34px;
		border-radius: 4px;
		text-indent: 5px;
		margin-left: 12px;
		display: inline-block;
		position: relative;
	}

	.form li:first-child div {
		border: 1px solid rgb(191, 212, 217);
	}

	.form li:first-child div input {
		border-radius: 4px;
	}
	.slideBtn .el-input__icon+.el-input__inner{
		padding-right: 0px;
    	width: 100px;
	}
	.sousuo{
		margin-left: 10px;
	}
	.search-openBtn{
		color:#93a6b7;
	}
</style>
